<template>
  <el-row :gutter="10" class="navigation">
    <el-col :xs="4" :lg="4" :md="4" :sm="4">
      <h2 @click="SkipGr" class="navigation-h2">ling的个人博客</h2>
    </el-col>
    <el-col :xs="17" :lg="17" :md="17" :sm="17">
      <ul class="navigation-ul">
        <li @click="HomeZhuan" class="navigation-li">首页</li>
        <li @click="Blogs" class="navigation-li">博客</li>
        <li @click="SkipGr" class="navigation-li">凌</li>
        <li @click="Leave" class="navigation-li">留言板</li>
      </ul>
    </el-col>
    <el-col :xs="2" :lg="2" :md="2" :sm="2">
      <div v-if="toKenSrts" class="navigation-img">
        <div class="navigation-img-i">
          <img @click="center" src="http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg" alt />
        </div>
        <div class="navigation-but">
          <el-button @click="login" type="danger">退出登录</el-button>
        </div>
      </div>
      <div v-else class="navigation-img">
        <div class="navigation-but">
          <el-button @click="loginn" type="primary">登录</el-button>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { removeToken, getToken } from '../../cookie/index'
export default {
  name: 'Navigation',
  data() {
    return {
      toKenSrts: false
    }
  },

  mounted() {
    const toKenStr = getToken()
    if (!toKenStr) {
      this.toKenSrts = false
    } else {
      this.toKenSrts = true
    }
  },
  methods: {
    center() {
      this.$router.push('/introduction')
    },
    Blogs() {
      this.$router.push('/blogs')
    },
    SkipGr() {
      this.$router.push('/introduction')
    },
    HomeZhuan() {
      this.$router.push('/')
    },
    Leave() {
      this.$router.push('/leave')
    },
    logini() {
      this.$router.push('/login')
    },
    login() {
      this.$message({
        message: '退出成功',
        type: 'success'
      })
      removeToken()
      location.reload()
    },
    loginn() {
      this.$router.push('/login')
    }
  }
}
</script>

<style >
.navigation {
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: auto;
}
.navigation-h2 {
  width: 200px;
  font-size: 25px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 5px 15px;
  margin: 0 auto;
  margin-top: 20px;
  cursor: pointer;
}
.navigation-ul {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
}
.navigation-li {
  transition: color 0.5s;
  font-size: 16px;
  font-weight: bold;
  margin-right: 45px;
  cursor: pointer;
  padding: 5px 20px;
  border-radius: 15px;
  border: 2px solid #ab90ca;
  color: #000;
  background-color: rgba(255, 255, 255, 0.8);
}
.navigation-li:hover {
  color: #f77280;
  transition: color 0.5s;
}
.navigation-img {
  display: flex;
  justify-content: space-evenly;
}
.navigation-img .navigation-img-i {
  width: 40px;
  height: 40px;
  margin-top: 20px;
}

.navigation-img .navigation-img-i img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
}
.navigation-but {
  margin-top: 20px;
}
</style>